<script lang="jsx">
  import { defineComponent } from 'vue';
  import { Menu } from '@jecloud/ui';
  import { useSiderMenuTree } from '../hooks/use-sider-menu-tree';
  import MenuSearch from './menu-search.vue';
  export default defineComponent({
    name: 'AdminSiderMenuTree',
    components: { Menu, MenuSearch },
    props: { root: String },
    setup(props, context) {
      const { menus, openKeys, selectedKeys, animation, siderMenu, clickMenu, onOpenChange } =
        useSiderMenuTree({
          props,
          context,
          Menu,
        });

      return () => {
        return (
          <div
            class={{
              'je-admin-sider-menu-tree': true,
              'is--animation': animation.value,
              'is--hover': siderMenu.isHover.value,
              'is--collapsed': siderMenu.collapsed.value,
              'is--itempadding24': siderMenu.collapsed.value && !siderMenu.isHover.value,
            }}
          >
            <MenuSearch menuId={props.root} menuType="sider" />
            <div class="menu-tree-body">
              <Menu
                v-model:selectedKeys={[selectedKeys.value]}
                v-model:openKeys={openKeys.value}
                onOpenChange={onOpenChange}
                theme="dark"
                inlineIndent={24}
                mode="inline"
                class="menu-tree-body-menu"
                inlineCollapsed={false}
                onClick={clickMenu}
                motion={{
                  name: 'je',
                  css: false,
                }}
              >
                {menus.value}
              </Menu>
            </div>
          </div>
        );
      };
    },
  });
</script>
<style lang="less">
  .je-admin-sider-menu-tree {
    padding-top: 44px;
    position: relative;
    .menu-tree-body {
      height: 100%;
      overflow: auto;
      &::-webkit-scrollbar {
        display: none;
      }
      &-menu {
        &.ant-menu {
          transition-property: width;
          .ant-menu-submenu .ant-menu-sub {
            transition-property: padding;
          }
          .ant-menu-item,
          .ant-menu-submenu-title {
            transition-property: border-color, padding !important;
            .ant-menu-submenu-arrow {
              transition: none !important;
              &::before,
              &::after {
                transition: none;
              }
            }
          }
          &.ant-menu-inline {
            .ant-menu-submenu {
              padding-bottom: 0;
            }
          }
        }
        &-title {
          display: flex;
          justify-content: center;
          align-items: center;
          &-content {
            flex: auto;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          &-badge {
            flex: none;
            color: @badge-text-color;
            background: @badge-color;
            line-height: 12px;
            font-size: 12px;
            padding: 1px 4px;
            border-radius: 4px;
          }
          &-star {
            font-size: 12px;
            margin-left: 5px;
            visibility: hidden;
            opacity: 0.6;
            &.is--star {
              visibility: visible;
            }
          }
          &-lock {
            font-size: 12px;
            margin-left: 5px;
          }
          &:hover {
            .menu-tree-body-menu-title-star {
              visibility: visible;
            }
          }
        }
      }
    }

    &.is--animation {
      .menu-tree-body-menu-title-badge {
        animation-name: panel-collapsed;
        animation-duration: 1s;
      }
    }

    &.is--collapsed {
      &.is--itempadding24 {
        .ant-menu-submenu-title,
        .ant-menu-item {
          padding-left: 24px !important;
        }
      }
      .ant-menu-submenu-title {
        .ant-menu-submenu-arrow {
          transition: visibility 0 ease;
          visibility: hidden;
        }
      }
      .menu-tree-body-menu-title-badge {
        position: absolute;
        top: 5px;
        left: 32px;
      }
      &.is--hover {
        .ant-menu-submenu-title {
          .ant-menu-submenu-arrow {
            transition-delay: 0.4s;
            visibility: visible;
          }
        }
        .menu-tree-body-menu-title-badge {
          position: initial;
        }
      }
    }
  }
</style>
